<template>
  <!--轮播图-->
  <div class="header-carousel">
    <el-carousel :interval="3000" type="card" height="200px">
      <el-carousel-item v-for="item in list" :key="item.id">
        <img :src="item.url">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: "Carousel",
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    data () {
      return {
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/common.styl'
  /*  轮播图 */
  .header-carousel {
    margin-top: $bannerMarginTop;
    padding: $bannerPadding;
    background: whitesmoke;
  }
  /*  轮播图分页 */
  .header-carousel >>> ul.el-carousel__indicators {
        margin: 65px 0 0;
      }
  .el-carousel__item {
    height: 0;
    padding-bottom: 23%;
    overflow: hidden;
  }
  .el-carousel__item img {
    width: 100%
  }
</style>
